<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/images/favicon.ico}"/>
    <link rel="stylesheet" th:href="@{css/semantic.css}">
    <link rel="stylesheet" th:href="@{css/list_custom.css}">
    <link rel="stylesheet" th:href="@{css/common.css}">
    <link rel="stylesheet" th:href="@{css/bootstrap.css}">
</head>

<body>

<div class="ui grid divided segment container">
    <div class="five wide column">
        <h4 class="ui inverted header">
            <a th:href="@{/main}" style="color:#ffffff">首 页</a>
        </h4>
        <h1 class="ui inverted center aligned header" style="font-size: 28px;margin-top:55px">
            <p class="sub header">
                Welcome to
            </p>
            聊天室
        </h1>
    </div>

    <div class="eleven wide column">
        <h4 class="ui inverted right aligned header">
            <a th:href="@{/toRegister}" style="color:#ff695e;">前往注册</a>
        </h4>
        <form class="ui form error" method="post" action="">
            <input type="hidden" name="method" value="login">
            <div class="field">
                <label for="username">用户名</label>
                <input value="admin" autofocus="autofocus" id="username" maxlength="50" name="username" type="text"/>
            </div>

            <div class="field">
                <label for="password">密码</label>
                <input value="123456" id="password" name="password" type="password" maxlength="20"/>
            </div>
            <input class="ui inverted red circular right floated button" type="button" id="btn" value="登录">
        </form>
    </div>
</div>
</body>
<script th:src="@{js/jquery.js}" type="text/javascript"></script>
<script th:src="@{js/bootstrap.bundle.js}" type="text/javascript"></script>
<script th:src="@{js/common.js}" type="text/javascript"></script>
<script>
    $('#btn').on('click', () => {
        let $username = $("#username");
        let $password = $("#password");

        let username = $username.val().trim();//用户名
        let password = $password.val().trim();//密码

        if (username === "") {
            showTip($username, "用户名不能为空");
            return;
        }
        if (password === "") {
            showTip($password, "密码不能为空");
            return;
        }
        // console.log("username:" + username + "，password:" + password);

        $.ajax({
            url: "/login",
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            // dataType: 'json',
            data: JSON.stringify(createUser(username, password)),
            success() {
                // console.log(res);
                // alert("登录成功");
                window.location.href = "/";
            },
            error(err) {
                // console.log(err.responseText);
                showTip($username, err.responseText);
            }
        });
    });
</script>
</html>